<template>
  <div class="mask-fixed flex-grid">
    <div class="address-header hairlines">
      <i class="iconfont icon-return2" @click="close"></i>
      <h2>选择地址</h2>
    </div>
    <div class="selected">
      <p v-for="(data, index) in address" :key="index" @click="backToUpperStage($event, index)" :data-code="data.code" :data-id="data.id">{{data.value}}</p>
    </div>
    <ul ref="container" class="lists flex-main" @click="select">
      <li class="hairlines-top iconfont" v-for="(data, index) in datas" :key="index" :data-code="data.code" :data-id="data.id">
        {{data.name}}
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'Address',
    data () {
      return {
        datas: [],
        province: [],
        city: [],
        area: [],
        street: [],
        address: [],
        current: 0
      }
    },
    methods: {
      close: function (event) {
        this.$emit('hideAddress')
      },
      select: function (event) {
        let target = event.target
        if (target.nodeType === 1 && target.nodeName.toLowerCase() === 'li') {
          this.curCode = target.getAttribute('data-code')
          this.address[this.current] = {}
          this.address[this.current]['code'] = target.getAttribute('data-code')
          this.address[this.current]['id'] = target.getAttribute('data-id')
          this.address[this.current]['value'] = target.innerText
          this.current++
          this.stage()
          this.$refs.container.scrollTop = 0
        }
      },
      backToUpperStage: function (event, index) {
        let target = event.target
        if (target.nodeType === 1 && target.nodeName.toLowerCase() === 'p') {
          this.curCode = target.getAttribute('data-code')
          this.current = index
          this.address = this.address.slice(0, index + 1)
          this.stage()
        }
      },
      stage: function () {
        this.$emit('addLoading')
        switch (this.current) {
          case 0:
            this.datas = this.province
            break
          case 1:
            this.axios.get('/api/service/getAddress?code=' + this.curCode)
            .then((res) => {
              let data = res.data
              this.datas = this.city = data.desc
            })
            break
          case 2:
            this.axios.get('/api/service/getAddress?code=' + this.curCode)
            .then((res) => {
              let data = res.data
              this.datas = this.area = data.desc
            })
            break
          case 3:
            this.axios.get('/api/service/getAddress?code=' + this.curCode)
            .then((res) => {
              let data = res.data
              this.datas = this.street = data.desc
            })
            break
          case 4:
            this.$emit('addressConfirm', this.address)
            break
          default:
            this.datas = []
            break
        }
      }
    },
    created () {
      this.address = []
      this.axios.get('/api/service/getProvince')
      .then((res) => {
        let data = res.data
        this.datas = this.province = data.desc
      })
    },
    updated () {
      this.$emit('delLoading')
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../assets/css/function.scss';
  .mask-fixed{
    overflow-y: auto;
    background: #fff;
    .address-header{
      position: relative;
      padding: 0 rem(24);
      height: rem(95);
      line-height: rem(95);
      background: #fff;
      .iconfont{
        position: absolute;
        top: 0;
        left: rem(24);
        height: rem(95);
        line-height: rem(95);
        font-size: rem(36);
      }
      h2{
        font-size: rem(32);
        color: #333;
      }
    }
    .selected{
      text-align: left;
      background: #f0eff5;
      p{
        padding: 0 rem(24);
        height: rem(80);
        line-height: rem(80);
        font-size: rem(30);
        color: #333;
      }
    }
    .lists{
      text-align: left;
      background: #fff;
      li{
        padding: 0 rem(24);
        height: rem(80);
        line-height: rem(80);
        font-size: rem(30);
        color: #333;
      }
      .iconfont:before{
        content: "\E62D";
        position: absolute;
        right: rem(24);
        top: 0;
        height: rem(80);
        line-height: rem(80);
        font-size: rem(24);
      }
    }
  }
</style>
